<template>
	<view class="ba">
		<swiper class="swiper" :style="{width:width,height:height}" :circular="circular" :indicator-dots="indicatorDots"
			:autoplay="swiperAutoplays" :indicator-color="indicatorColor" :indicator-active-color="indicatorActiveColor"
			:interval="interval" :duration="duration" @change='swiperChange'>
			<swiper-item v-for="(item,index) in list" :index="index" :key="index" @click="clicks(item)">
				<video :id="`video${index}`" style="width: 100%;" v-if="item.type === 'video'"
					:videoAutoplay="videoAutoPlays" :enable-progress-gesture="false" :src="item.url"
					@play="handleVideoPlay" @pause="handleVideoPause" @ended="handleVideoEnd"></video>
				<image style="width: 100%;height:100%;" v-if="item.type === 'image'" :src="item.url">
				</image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		name: 'cf-banner',
		emits: ['click'],
		props: {
			//自定义长宽之后  兼容h5样式将失效，可自行改组件或者覆盖操作
			width: {
				type: String,
				default: '350px'
			},
			height: {
				type: String,
				default: '220px'
			},
			indicatorColor: {
				type: String,
				default: '#cecece'
			},
			indicatorActiveColor: {
				type: String,
				default: '#38ffff'
			},
			interval: { //banner自动切换时间间隔
				type: Number,
				default: 5000
			},
			duration: { //banner滑动动画时长
				type: Number,
				default: 1500
			},
			// 是否显示指示
			indicatorDots: {
				type: Boolean,
				default: true,
			},
			//是否采用衔接滑动，即播放到末尾后重新回到开头
			circular: {
				type: Boolean,
				default: true,
			},
			swiperAutoplay: { //banner是否自动轮播
				type: Boolean,
				default: true,
			},
			videoAutoPlay: { //视频是否自动播放
				type: Boolean,
				default: true,
			},
			list: { //banner集合
				type: Array,
				default: () => []
			},

		},
		data() {
			return {
				videoAutoPlays: this.videoAutoPlay,
				swiperAutoplays: this.swiperAutoplay,
			}
		},
		//事件监听
		watch: {},
		onLoad() {
			console.log(this.width)
		},
		methods: {
			clicks(item) {
				console.log("banner", item)
				this.$emit('click', item);
			},
			//banner事件
			swiperChange(detail) {
				//切换时要把视频暂停
				uni.createVideoContext("video" + (this.videoIndex)).pause()
				this.videoIndex = detail.detail.current
			},
			handleVideoPlay() {
				this.swiperAutoplays = false
				this.videoAutoPlays = true;
			},
			handleVideoPause() {
				this.swiperAutoplays = true
			},
			handleVideoEnd() {
				this.swiperAutoplays = true;
			},
		}
	}
</script>


<style lang="scss">
	.ba {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 10px;
	}

	/* #ifdef H5 */
	@media screen and (min-width: 768px) and (max-width: 1920px) {
		.swiper {
			width: 800px;
			height: 220px;
		}
	}

	/* #endif */
</style>
